<template>
  <div class="main-block-3">
    <div class="title">危险情报</div>
    <div class="subtitle">{{num | number}}</div>
    <report-list :list="reportList"></report-list>
  </div>
</template>

<script>
import ReportList from './ReportList'
import {randint} from 'utils/random'

const colors = ['red', 'blue', 'yellow']
const example = `Hacker culture, an idea derived from a community of enthusiast computer programmers and systems designers, in the 1960s around the Massachusetts Institute of Technology's (MIT's) Tech Model Railroad Club (TMRC) and MIT Artificial Intelligence Laboratory.[2] The hobbyist home computing community, focusing on hardware in the late 1970s (e.g. the Homebrew Computer Club)[3] and on software (video games,[4] software cracking, the demoscene) in the 1980s/1990s. Later, this would go on to encompass many new definitions such as art, and Life hacking.`
var data = {};
var list = [
  {color: 'red', content: example, timestamp: 1},
  {color: 'blue', content: example, timestamp: 2},
  {color: 'yellow', content: example, timestamp: 3}
]
data.num = 15135563;
data.reportList = list;

setInterval(function(){
  if(randint(3) == 0){
    list.unshift({color: colors[randint(2)], content: example, timestamp: +new Date()})
    data.num++;
    if(list.length > 5){
      list.pop()
    }
  }
}, 1200)

export default {
  name: 'block3',
  components: {ReportList},
  data(){
    return data;
  }
}
</script>

<style scoped>
.main-block-3{
  position: absolute;
  background-image: url(./img/main-block-3.png);
  background-size: 100% 100%;
  right: 4.07vh;
  top: 6.48vh;
  width: 53.15vh;
  height: 26.02vh;
  filter: drop-shadow(0 0 7px #0057b8);
}
.title{
  position: absolute;
  color: #b8fdff;
  font-size: 2.4vh;
  left: 4.6vh;
  top: 2.1vh;
}
.subtitle{
  position: absolute;
  color: white;
  font-size: 1.92vh;
  left: 27.31vh;
  text-align: center;
  width: 23.8vh;
  top: 4.5vh;
}
.report-list{
  width: 48vh;
  height: 16.5vh;
  position: absolute;
  left: 3.15vh;
  top: 7.22vh;
}
</style>
